<template>
  <div class="t1">
    <div class="block">
      <span class="demonstration">分组（{{ groupSize }}）：</span>
      <el-slider v-model="groupSize" :min="1" :max="49"></el-slider>
    </div>
    <el-table
      v-for="(column, tableIndex) in columnGroup"
      :key="tableIndex"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="handleHeaderCellStyle"
    >
      <el-table-column
        v-for="(n, colIndex) in column"
        :key="colIndex"
        :label="formattedNumber(n)"
        :width="columnWidth"
      >
        <template>
          <div class="flex flex-col" style="font-size: 12px; border-left: 1px solid #dfe6ec;">
            <div class="flex justify-between" style="border-bottom: 1px solid #dfe6ec;">
              <div class="flex-1 flex justify-start" style="border-right: 1px solid #dfe6ec;padding-left: 8px;">
                <div>{{ getNumberOccurrences(n) }} 次 / {{ allValues.length }}</div>
              </div>
              <div class="flex-1 flex justify-end items-center" style="padding-right: 8px;">
                <div class="icon-24 flex items-center">
                  <svg-icon v-if="isTrendUp(n)" icon-class="trend-up" />
                  <svg-icon v-if="isTrendDown(n)" icon-class="trend-down" />
                </div>
                <div>{{ getNumberPercent(n) }} %</div>
              </div>
            </div>
            <div class="flex justify-between" style="border-bottom: 1px solid #dfe6ec;">
              <div class="flex-1 flex justify-start" style="border-right: 1px solid #dfe6ec; padding-left: 8px; ">
                <div>{{ getAverageOccurrences() }}</div>
              </div>
              <div class="flex-1 flex justify-end" style="padding-right: 8px;">
                <div>{{ getAveragePercent() }} %</div>
              </div>
            </div>

            <div class="flex justify-between" style="border-bottom: 1px solid #dfe6ec;">
              <div class="flex-1 flex justify-start" style="border-right: 1px solid #dfe6ec;padding-left: 8px;">
                <div>{{ getGroupOccurrences(n) }} 次 / {{ allValues.length }}</div>
              </div>
              <div class="flex-1 flex justify-end items-center" style="padding-right: 8px;">
                <div class="icon-16 flex items-center" style="margin-right: 4px;">
                  <svg-icon v-if="isGroupTrendUp(n)" icon-class="chart-up" />
                  <svg-icon v-if="isGroupTrendDown(n)" icon-class="chart-down" />
                </div>
                <div>{{ getGroupPercent(n) }} %</div>
              </div>
            </div>
            <div class="flex justify-between">
              <div class="flex-1 flex justify-start" style="border-right: 1px solid #dfe6ec; padding-left: 8px; ">
                <div>{{ getGroupAverageOccurrences() }}</div>
              </div>
              <div class="flex-1 flex justify-end" style="padding-right: 8px;">
                <div>{{ getGroupAveragePercent() }} %</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import _ from 'lodash'
// import NP from 'number-precision'
import { NUMBERS, paletteColors, findValueIndexIn2DArray, shuffleArray, findSubArray } from '@/utils/study.js'

const SHUFFLE_COLORS = shuffleArray(paletteColors)

const formattedNumber = (n) => {
  return n.toString().padStart(2, '0')
}

export default {
  props: {
    groups: {
      type: Array,
      default: () => []
    },
    rowSize: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      NUMBERS,
      tableData: [{}],
      groupSize: this.rowSize,
      // columnWidth: 93
      columnWidth: 150
    }
  },
  computed: {
    // 每个数字出现的次数
    countsArray() {
      return _(this.allValues)
        .countBy()
        .thru((counts) => {
          return _.times(
            49,
            (i) => counts[(i + 1).toString().padStart(2, '0')] || 0
          )
        })
        .value()
    },
    // 分组后的列数
    size() {
      return Math.ceil(NUMBERS.length / this.groupSize)
    },
    columnGroup() {
      return _.chunk(NUMBERS, this.size)
    }
  },
  methods: {
    formattedNumber,
    // 获取每个数字出现的次数
    getNumberOccurrences(n) {
      const result = _.chain(this.allValues)
        .map(o => Number(o.number))
        .countBy() // 使用 lodash 的 countBy 方法统计每个数字出现的次数
        .value()

      return result[n]
    },
    // 获取每个数字出现的概率
    getNumberPercent(n) {
      // 获取总数字数量
      const totalCount = this.allValues.length
      if (totalCount === 0) {
        return 0
      }
      // 获取指定数字的出现次数
      const occurrence = this.getNumberOccurrences(n)
      // 计算概率
      const percent = (occurrence / totalCount) * 100

      return percent.toFixed(2)
    },
    // 获取每个分组出现的次数
    getGroupOccurrences(n) {
      const groups = findSubArray(this.groups, n)
      // 统计该分组中所有数字的出现次数
      const groupOccurrences = _.chain(groups)
        .map(number => this.getNumberOccurrences(number)) // 获取分组中每个数字的次数
        .sum() // 累加次数
        .value()
      return groupOccurrences
    },
    // 获取单个平均出现的概率
    getAveragePercent() {
      return ((1 / 49) * 100).toFixed(2)
    },
    // 获取平均出现的次数
    getAverageOccurrences() {
      return (this.allValues.length / 49).toFixed(1)
    },
    // 判断单个是否上升
    isTrendUp(n) {
      return this.getNumberOccurrences(n) > this.getAverageOccurrences()
    },
    // 判断单个是否下降
    isTrendDown(n) {
      return this.getNumberOccurrences(n) < this.getAverageOccurrences()
    },
    // 获取分组平均出现的概率
    getGroupAveragePercent() {
      return ((this.groups[0]?.length / 49) * 100).toFixed(2)
    },
    // 获取分组平均出现的次数
    getGroupAverageOccurrences() {
      return ((this.allValues.length / 49) * this.groups[0]?.length || 0).toFixed(1)
    },
    // 获取分组是否上升
    isGroupTrendUp(n) {
      return this.getGroupOccurrences(n) > this.getGroupAverageOccurrences()
    },
    // 获取分组是否下降
    isGroupTrendDown(n) {
      return this.getGroupOccurrences(n) < this.getGroupAverageOccurrences()
    },
    // 获取分组出现的概率
    getGroupPercent(n) {
      const groupOccurrences = this.getGroupOccurrences(n)
      return ((groupOccurrences / this.allValues.length) * 100).toFixed(2)
    },
    // 处理表头单元格样式
    handleHeaderCellStyle({ _, column }) {
      const numberStr = column.label
      const groupIndex = findValueIndexIn2DArray(this.groups, Number(numberStr))
      const backgroundColor = SHUFFLE_COLORS[groupIndex]

      return {
        backgroundColor,
        color: 'rgba(0, 0, 0, 0.85)',
        fontWeight: 'normal',
        textAlign: 'center'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.t1 {
  padding: 24px 0;
  position: absolute;
  inset: 0;
  overflow-y: auto;

  ::v-deep .el-table {
    border-collapse: collapse;
    background-color: transparent !important;
    &::before {
      height: 0;
    }
    td,
    .cell {
      padding: 0 !important;
    }
  }
}

::v-deep {
  .el-slider__button-wrapper {
    z-index: 100;
  }
  .icon-24 svg {
    width: 24px;
    height: 24px;
  }
  .icon-16 svg {
    width: 16px;
    height: 16px;
  }

}

.header-descriptions {
  &__label {
    width: 100px;
  }
}
</style>
